// define the namespace
syslib.namespace("syslib.ui");

// tag conversor
syslib.ui.BoxTag = __class(syslib.ui.TagConversor, {
	component : null, 

	execute : function(){
		// create the toolbar
		var component = new syslib.ui.Box(this.__attributes);
		
		// append
		component.appendTo(this.__container);
		
		// store the component
		this.component = component;
	},

	getComponent : function(){
		return this.component;
	}
});

// component definition
syslib.ui.Box = __class(syslib.ui.UIComponent, {
	__OPENED : 1, 
	__CLOSED : 2, 
	
	__options : {},
	__references : {}, 

	id : null,
	status : this._OPENED, 
	bodyStyle : null,
	lastHeight : 0, 

	__construct : function(options){
		// load the style
		syslib.loadStyleForComponent("box");
		
		// set the options
		this.__options = __extend({
			id : syslib.element.generateID(), 
			title : "Untitled box", 
			style : "", 
			bodyStyle : "", 
			innerHTML : ""
		}, options);
		
		// set the status
		this.status = this.__OPENED;
		
		// register this parser
		syslib.ui.Box.components[this.__options.id] = this;
		
		// return
		return true;
	},

	__createElement : function(){
		// create the attributes
		var attributes = {
			"id" : this.__options.id, 
			"style": this.__options.style, 
			"class" : "syslib-box-container"
		};
		
		// create the structure of the box
		var boxStructure = ["div", attributes,
			["div", {"class" : "syslib-box-header"},
				["span", {"class" : "syslib-box-header-buttons"},
					["div", {"innerName" : "toggleButton", "class" : "syslib-box-up-button-normal"}]
				], 
				["span", {"class" : "syslib-box-header-text syslib-title-text"},
			 	 	this.__options.title
			 	],
			], 
			["div", {"innerName" : "body", "class" : "syslib-box-body", "style" : this.__options.bodyStyle},
			 	this.__options.innerHTML
			]
		];
		
		// create the element
		var box			= syslib.element.createFromJSON(false, boxStructure);
		var references	= box.references;
		var element		= box.element;

		// setup the events
		__evtListen('click', references.toggleButton, function(){ this.toggleStatus(); }.applyTo(this));
		__evtListen("mouseover", references.toggleButton, this.toggleButton_evtMouseOver.applyTo(this));
		__evtListen("mouseout", references.toggleButton, this.toggleButton_evtMouseOut.applyTo(this));
		
		// close, if needed
		if(__valid(this.__options.closed)){ this.toggleStatus();}
		
		// store the elements
		this.__element = element;
		this.__references = references;

		// return
		return element;
	}, 
	
	appendChild : function(child){
		this.__references.body.appendChild(child)
	},
	
	toggleStatus : function(){
		// check if the element is visible
		if(this.status == this.__OPENED){
			// change the style
			this.__references.toggleButton.className = "syslib-box-down-button-normal";
			
			// set the status
			this.status = this.__CLOSED;
			
			// hide the body
			syslib.element.hide(this.__references.body);
		} else {
			// change the style
			this.__references.toggleButton.className = "syslib-box-up-button-normal";
			
			// set the status
			this.status = this.__OPENED;
			
			// show the body
			syslib.element.show(this.__references.body);	
		} 
	}, 
	
	toggleButton_evtMouseOver : function(){
		// check the box status
		if(this.status == this.__OPENED){
			// set the class
			this.__references.toggleButton.className = "syslib-box-up-button-over";
		} else {
			this.__references.toggleButton.className = "syslib-box-down-button-over";
		}
	}, 
	
	toggleButton_evtMouseOut : function(){
		// check the box status
		if(this.status == this.__OPENED){
			// set the class
			this.__references.toggleButton.className = "syslib-box-up-button-normal";
		} else {
			this.__references.toggleButton.className = "syslib-box-down-button-normal";
		}
	}
});


// components storage
syslib.ui.Box.components = {};

// static methods
syslib.ui.Box.toggleStatus = function(id){
	syslib.ui.Box.components[id].toggleStatus();
};